<script setup lang="ts">

import {WebDiskDirVO} from "@/api/ai/webdiskdir";
import {Check, Delete, Edit, Folder} from "@element-plus/icons-vue";
import {formatDate} from "@/utils/formatTime";

const props = defineProps({
  dir:{
    type:Object as PropType<WebDiskDirVO>,
    required:true
  }
});
const emits = defineEmits<{
  (e:'ok',vo:WebDiskDirVO):void;
  (e:'delete',data:any):void;
}>();
const newName=ref<string>()
const isEdit=ref(false);
const doEdit=()=>{
  isEdit.value=true;
}
const doOk=()=>{
  if (newName.value!==props.dir.name){
    emits("ok",{...props.dir, name:newName.value})
  }
  isEdit.value=false;
}
const handleDelete=(id:any,type:string)=>{
  emits("delete", {id, type});
}
onMounted(()=>{
  newName.value=props.dir.name
})
</script>

<template>
<div class="dir_div">
  <div class="icon">
    <el-icon :size="24"><Folder/></el-icon>
  </div>
  <div class="title">
    <template v-if="isEdit">
      <el-input v-model="newName" @click.stop/>
    </template>
    <template v-else>
      {{props.dir.name}}
    </template>
  </div>
  <div @click.stop>
    <el-button-group>
      <el-button text @click="doEdit" v-if="!isEdit">
        <el-icon :size="15"><Edit /></el-icon>
      </el-button>
      <el-button type="primary" text @click="doOk" v-else>
        <el-icon :size="15"><Check /></el-icon>
      </el-button>
      <el-button type="danger" text @click="handleDelete(props.dir.id,'dir')">
        <el-icon :size="15"><Delete/></el-icon>
      </el-button>
    </el-button-group>
  </div>
  <div class="type">
    文件夹
  </div>
  <div class="day">
    {{props.dir?.createTime?formatDate(props.dir.createTime):''}}
  </div>
</div>
</template>

<style scoped lang="scss">
.dir_div{
  display: flex;
  flex-direction: row;
  padding: 10px;
  gap: 20px;
  line-height: 24px;
  align-items: center;
  font-weight: 300;
  &:hover{
    background-color: #f6f6f6;
  }
  &:hover .title{
    color: #059bef;
  }
  .title{
    flex: 1;
    overflow: hidden;
    user-select: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .type{
    color: #818080;
    width: 80px;
  }
  .day{
    color: #818080;
    width: 150px;
  }
}
</style>
